<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="24" :offset="0" style="display: flex;justify-content: space-between;align-items: center;">
          <el-button type="primary" size="default" @click="addteacherlist">{{
            !scene ? "添加" : "取消"
          }}</el-button>
          <el-button type="danger" size="default" @click="backpage">上一步
          </el-button>
        </el-col>

        <el-col>
          <div style="display: flex; margin-top: 10px" v-show="scene">
            <el-input
              style="margin-right: 20px;"
              v-model="pulldataform"
              placeholder="请输入亲子规划手册内容"
            ></el-input>
            <el-button
              type="primary"
              size="default"
              @click="pullmenuPermissionList"
              >确定</el-button
            >
            <el-button
              type="danger"
              size="default"
              @click="canclemenuPermissionList"
              >取消</el-button
            >
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-table
      border
      style="margin-bottom: 20px"
      :data="menuPermissionList"
      row-key="contentid"
    >
      <el-table-column prop="title" label="名称" />

      <el-table-column label="操作">
        <template slot-scope="{ row, $index }">
          <!-- 加号按钮 -->
          <el-button
            :disabled="row.level === 4"
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="toAddPermission(row)"
          />
          <!-- 修改按钮 -->
          <el-button
            type="warning"
            icon="el-icon-edit"
            size="mini"
            title="修改"
          />
          <!-- 删除按钮 -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            title="删除"
          />

          <el-drawer
            :title="row_puppet.title + '规划'"
            :visible.sync="drawer"
            size="50%"
          >
            <div>
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4 }"
                placeholder="请输入内容"
                v-model="row_puppet.content"
              >
              </el-input>
            </div>
            <div style="padding: 20px 10px">
              <el-button type="success" size="default" @click="pullcontent(row_puppet)"
                >确定</el-button
              >
              <el-button size="default" @click="canclecontent(row_puppet)">取消</el-button>
            </div>
            <div>
              <div
                style="position: absolute; bottom: 0; left: 0; padding: 10px"
              >
                <el-button @click="innerDrawer = true" type="danger"
                  >查看规划图</el-button
                >
              </div>

              <el-drawer
                title="家庭教育亲子课"
                :append-to-body="true"
                :before-close="handleClose"
                :visible.sync="innerDrawer"
              >
                <el-timeline>
                  <el-timeline-item
                    placement="top"
                    color="#cd5a91"
                    v-for="(item, index) in menuPermissionList"
                    :key="index"
                  >
                    <el-card>
                      <h4>{{ item.title }}</h4>
                      <p>{{ item.content }}</p>
                    </el-card>
                  </el-timeline-item>
                </el-timeline>
              </el-drawer>
            </div>
          </el-drawer>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>
<script>
export default {
  props: {
    userid: Number,
    teacherid: Number,
  },
  data() {
    return {
      menuPermissionList: [], // 菜单列表
      drawer: false,
      innerDrawer: false,
      scene: false,
      pulldataform: "", //标题
      textarea2: "", //content具体内容
      row_puppet:{}
    };
  },
  methods: {
    show1111() {
      console.log(this.menuPermissionList);
    },
    //随机生成id:
    randid() {
      const timestamp = new Date().getTime(); // 获取当前时间戳

      return "id-" + timestamp.toString();
    },
    //点击增加对象
    addteacherlist() {
      this.scene = !this.scene;
      // this.$refs.spu.initSpuData(row);
    },
    //新增标题按钮
    pullmenuPermissionList() {
      let randstringid = this.randid();
      this.menuPermissionList.push({
        contentid: randstringid,
        userid: this.userid,
        teacherid: this.teacherid,
        title: this.pulldataform,
        content: "",
      });
      //发起请求;
      this.addpullmenuPermissionList(randstringid);
    },
    //增加数据库中:
    async addpullmenuPermissionList(id) {
      let result =
        await this.$API.CommunityConvention.addpullmenuPermissionList({
          contentid: id,
          userid: this.userid,
          teacherid: this.teacherid,
          name: this.pulldataform,
          content: "",
        });
      console.log(result);
      if (result.code == 200) {
        //this.updateMenuId(id,result.data.result)
        this.$message({ message: "增加成功", type: "success" });
      }
    },
    //修改对象数组的对象id
    updateMenuId(index1, index2) {
      // 手动更新menuPermissionList中id为700的对象的id属性为100
      const index = this.menuPermissionList.findIndex(
        (menu) => menu.id === index1
      );
      if (index !== -1) {
        this.menuPermissionList[index].id = index2;
      }
    },
    //标题取消:
    canclemenuPermissionList() {
      this.pulldataform = "";
      this.addteacherlist();
    },
    //确认详细内容
    pullcontent(row) {
      const index = this.menuPermissionList.findIndex(
        (menu) => menu.id === row.id
      );
      if (index !== -1) {
        this.menuPermissionList[index].content = row.content;
        //发起数据请求:
        this.editcontent(row);
      }
    },
    //取消按钮
    canclecontent(row) {
      this.drawer = false;
    },
    toAddPermission(row) {
      this.row_puppet = row
      this.drawer = true;
    },
    handleClose(done) {
      this.$confirm("还有未保存的工作哦确定关闭吗？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //查询所有活动数据
    async getvipcontentgao1() {
      let result = await this.$API.CommunityConvention.getvipcontentgao1({
        userid: this.userid,
        teacherid: this.teacherid,
      });
      if (result.code == 200) {
        //this.updateMenuId(id,result.data.result)
        this.$message({ message: "查询成功", type: "success" });
        this.menuPermissionList = result.data.results;
      }
    },
    async editcontent(row) {
      let result = await this.$API.CommunityConvention.editcontent(row);
      if (result.code == 200) {
        this.$message({ message: result.data.msg, type: "success" });
        
      }
    },
    backpage(){
      this.$bus.$emit('back_CommunityConvention',false)
    }
  },
  computed: {},
  mounted() {
    this.getvipcontentgao1();
  },
};
</script>

<style></style>
